<template>
    <view>
        <view class="login-title">
            <view>註冊賬號</view>
        </view>
        <view class="register">
            <text>已有賬號？</text>
            <text class="blue" @click="go_login">立即登錄</text>
        </view>
        <form @submit="formSubmit">
            <view class="from">
                <view class="from-item">
                    <view class="label font-28">手機號/邮箱</view>
                    <input class="font-28 input" v-model="from.mobile" name="mobile" type="text" maxlength="40" placeholder="手機號/邮箱" placeholder-class="placeholder" />
                    <image class="item-img" src="../static/close_new.png" @tap="clearMobile"></image>
                </view>
                <!-- <picker :range="list" range-key="area_name" @change="picker_change">
					<view class="from-item">
						<view class="font-30 label">
							歸屬地
						</view>
						<view class="font-30" :style="{
			                    textAlign:'left',
			                    flex:1,
			                    color:area_name?'#333333':'grey'
			                    }">
							{{area_name?area_name:'號碼歸屬地'}}
						</view>
					</view>
				</picker> -->
                <!-- <view class="from-item rel">
					<view class="label font-28">驗證碼</view>
					<input class="font-28" v-model="from.mobile_code" name="mobile_code" type="number" maxlength="4" placeholder="驗證碼" placeholder-class="placeholder" />
					<vercode class="right" v-model="from.mobile" :timeout="timeout" :area="area"></vercode>
				</view> -->
                <view class="from-item">
                    <view class="label font-28">密碼</view>
                    <input
                        class="font-28 no-bor input"
                        :type="isPsw ? 'text' : 'password'"
                        v-model="from.password"
                        name="password"
                        placeholder="設置密碼6-12位字母+數字"
                        placeholder-class="placeholder"
                    />
                    <image class="item-img" :src="isPsw ? pswYes : pswNo" @tap="isPsw = !isPsw"></image>
                </view>
                <view class="from-item">
                    <view class="label font-28">確認密碼</view>
                    <input
                        class="font-28 no-bor input"
                        :type="isPsw2 ? 'text' : 'password'"
                        v-model="from.password2"
                        name="password2"
                        placeholder="請確認密碼"
                        placeholder-class="placeholder"
                    />
                    <image class="item-img" :src="isPsw2 ? pswYes : pswNo" @tap="isPsw2 = !isPsw2"></image>
                </view>
                <view class="from-item">
                    <view class="label font-28">邀請碼</view>
                    <input class="font-28 input" v-model="from.invite" name="invite" placeholder="請輸入邀請碼" placeholder-class="placeholder" />
                </view>
                <view class="radio">
                    <checkbox-group @change="isChange">
                        <view class="" style="margin-bottom: 20rpx;">
                            <checkbox style="transform: scale(0.7);" color="#00be5f" :checked="agrees[0]" value="0" />
                            我已閱讀並同意
                            <text @tap="go_agree(3)">網絡服務協議</text>
                            和
                            <text @tap="go_agree(4)">隱私政策</text>
                        </view>
                        <!-- <view class="" style="margin-bottom: 20rpx;">
                            <checkbox style="transform: scale(0.7);" color="#00be5f" :checked="agrees[1]" value="1" />我已閱讀並同意<text @tap="go_agree(2)">购买祝播客注意事项</text>
                        </view>
                        <view class="" style="margin-bottom: 20rpx;">
                            <checkbox style="transform: scale(0.7);" color="#00be5f" :checked="agrees[2]" value="2" />我已閱讀並同意<text @tap="go_agree(12)">60岁以上人士购买须知</text>
                        </view> -->
                    </checkbox-group>
                </view>
            </view>
            <button form-type="submit" class="buttom font-32">註冊</button>
        </form>
        <zwSlideCode ref="slideCodeRef" v-model="slideCode" @success="success"></zwSlideCode>
    </view>
</template>

<script>
import vercode from '@/components/get_verification.vue'
import zwSlideCode from '@/components/zw-slide-code/slideCode.vue'
var graceChecker = require('@/globe/checker.js')
export default {
    data() {
        return {
            slideCode: {},
            from: {
                mobile: '',
                // mobile_code: '',
                password: '',
                password2: '',
                // push_id: plus.push.getClientInfo().clientid,
                invite: '',
                isAgree: ''
            },
            agrees: [false],
            area: '',
            area_name: '',
            list: [],
            timeout: 0,
            isPsw: false,
            isPsw2: false,
            pswNo: '../static/psw_no.png',
            pswYes: '../static/psw_yes.png'
        }
    },
    mounted() {
        this.$http('get|api/Api/send_validate_code').then(res => {
            this.list = res.result.country_area
            this.timeout = +res.result.sms_time_out
        })
    },
    methods: {
        success(e) {
            this.$http('post|api/User/reg', this.from)
                .then(res => {
                    this.$toastApp(res.msg)
                    this.$store.commit('login', res.result)
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 500)
                })
                .catch(err => {
                    this.$toastApp(err.msg, 'none')
                })
        },
        clearMobile() {
            this.from.mobile = ''
        },
        formSubmit(e) {
            //定义表单规则
            var rule = [
                {
                    name: 'mobile',
                    checkType: 'notnull',
                    errorMsg: '手機號碼或邮箱不能爲空'
                },
                // {
                // 	name: "mobile_code",
                // 	checkType: "notnull",
                // 	errorMsg: "請輸入驗證碼"
                // },
                {
                    name: 'password',
                    checkType: 'notnull',
                    errorMsg: '請輸入密碼'
                },
                {
                    name: 'password',
                    checkType: 'string',
                    checkRule: '6,12',
                    errorMsg: '密碼應爲6-12位字母+數字'
                },
                {
                    name: 'password2',
                    checkType: 'notnull',
                    errorMsg: '請輸入確認密碼'
                },
                {
                    name: 'password',
                    checkType: 'same',
                    checkRule: this.from.password2,
                    errorMsg: '兩次密碼輸入不一致'
                },
                {
                    name: 'password2',
                    checkType: 'same',
                    checkRule: this.from.password,
                    errorMsg: '兩次密碼輸入不一致'
                }
            ]
            //进行表单检查 e.detail.value 内存放着表单数据
            var formData = this.from // e.detail.value;
            var checkRes = graceChecker.check(formData, rule)
            if (checkRes) {
                let isAgree = this.agrees.find(x => x === false)
                if (isAgree !== false) {
                    this.$refs.slideCodeRef.open()
                } else {
                    // 、事项、须知
                    this.$toastApp('請先閱讀並同意協議', 'none')
                }
            } else {
                uni.showToast({
                    title: graceChecker.error,
                    icon: 'none'
                })
            }
        },
        picker_change(e) {
            let index = e.detail.value
            this.area = this.list[index].area
            this.area_name = this.list[index].area_name
        },
        go_login() {
            uni.redirectTo({
                url: '/pages/login'
            })
        },
        go_agree(type) {
            this.$http('get|api/Article/regulation', {
                id: type
            }).then(res => {
                uni.navigateTo({
                    url: '/pages/agreement?type=' + type + '&title=' + res.result.topic_title
                })
            })
        },
        isChange(e) {
            let data = e.detail.value
            this.agrees = this.agrees.map(item => false)
            data.forEach(x => {
                this.agrees[x] = true
            })
        }
    },
    components: {
        vercode,
        zwSlideCode
    }
}
</script>

<style lang="scss">
.login-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66rpx;
    font-size: 48rpx;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #313133;
    line-height: 66rpx;
    // padding: 0 20rpx;
    margin-left: 60rpx;

    .language-box {
        // position: absolute;
        // top: 24rpx;
        // right: 20rpx;
        display: flex;
        align-items: center;
        margin-right: 20rpx;

        .language-item {
            margin-left: 20rpx;
        }

        .checks {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #333333;

            image {
                width: 32rpx;
                height: 32rpx;
            }

            text {
                margin-left: 10rpx;
            }
        }

        .check-box {
            position: absolute;
            z-index: 9999;
            width: 120rpx;
            margin-top: 6rpx;
            background-color: #ffffff;
            border: 2rpx solid #cccccc;

            .check-item {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 60rpx;
                color: #333333;
                font-size: 24rpx;

                image {
                    width: 24rpx;
                    height: 24rpx;
                    border-radius: 50%;
                    margin-right: 4rpx;
                }
            }
        }
    }
}

.register {
    height: 36rpx;
    font-size: 26rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #919298;
    line-height: 36rpx;
    margin-left: 60rpx;
    margin-top: 14rpx;

    .blue {
        color: var(--theme);
    }
}

.from {
    padding: 60rpx;
    box-sizing: border-box;
    padding-right: 0;

    .rel {
        position: relative;
    }

    .right {
        position: absolute;
        right: 0;
    }

    .from-item {
        display: flex;
        border-bottom: 1rpx solid #f2f3f6;
        height: 100rpx;
        align-items: center;
        width: 630rpx;
        position: relative;
        .input {
            flex: 1;
        }
        .label {
            width: 180rpx;
        }

        .placeholder {
            color: #d7d7d9;
        }

        .item-img {
            // position: absolute;
            // right: 20rpx;
            width: 36rpx;
            height: 36rpx;
            padding-left: 20rpx;
        }

        .no-bor {
            border: none;
            outline: none;
        }
    }
}

.radio {
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #a7aab3;
    line-height: 32rpx;
    margin-top: 26rpx;

    radio {
        transform: scale(0.7);
        vertical-align: middle;
    }

    text {
        color: #ff5a3c;
        text-decoration: underline;
    }
}

.buttom {
    width: 630rpx;
    height: 90rpx;
    // background: rgba(78, 110, 243, 1);
    background-color: var(--theme);
    border-radius: 45rpx;
    text-align: center;
    line-height: 90rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    color: #ffffff;
}
</style>
